<template>
  <!-- 催收执行页-行动区模块 -->
  <section class="component collection-action-area panel">
    <!-- <el-tabs :value="initComponent.name">
      <el-tab-pane :label="initComponent.label" :name="initComponent.name">
      </el-tab-pane>
    </el-tabs>-->
    <el-card :header="initComponent.label" class="collection-area">
      <component :caseId="caseId" :topInfo="topInfo" :is="initComponent.name" @success="onFollowSuccess"></component>
    </el-card>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { components, tabs } from "./collection-action-area/";
import { namespace } from "vuex-class";
import { Dependencies } from "~/core/decorator";
import { MENU_CHANNEL } from "~/config/enum.config";
import { RepairCasesService } from "~/services/domain-service/repair-cases.service";
const CollectionExecutionModule = namespace("collection-execution");
import { Prop } from "vue-property-decorator";
@Component({
  components: {
    ...components
  }
})
export default class CollectionActionArea extends Vue {
  @Dependencies(RepairCasesService)
  private repairCasesService: RepairCasesService;
  @CollectionExecutionModule.Mutation private updateHistoryInfoActive;
  @CollectionExecutionModule.Mutation private updateAddRecordFlag;
  @CollectionExecutionModule.Mutation private updateAddListActiveName;

  @CollectionExecutionModule.State private caseId;
  @CollectionExecutionModule.State private menuChannel;
  @Prop() private topInfo;
  private collectionType: string = "";

  /**
   * 获取要展示的行动面板
   */
  private get initComponent (): any {

    if (this.menuChannel === MENU_CHANNEL.Letter_repair_case) {
      this.getCaseCollectionType();
      return this.collectionType === "TEL"
        ? tabs.find(v => v.channel.includes(MENU_CHANNEL.Tel_personal)) || {}
        : tabs.find(v => v.channel.includes(MENU_CHANNEL.Visit_personal)) || {};
    }
    const tab: any = tabs.find(v => v.channel.includes(this.menuChannel)) || {};

  console.log('initComponent tab',tab);

    return tab;
  }

  private mounted () {
    const tab: any = tabs.find(v => v.channel.includes(this.menuChannel)) || {};
    // 如果是法务行动区，则将tab设置为法务行动记录
    if (tab.name === 'legal-urge-action-area') {
      this.updateHistoryInfoActive('legal-urge-history')
    }
  }

  /**
   * 成功后更新历史纪录面板
   */
  private onFollowSuccess () {
    console.log('onFollowSuccess', this.initComponent);

    this.updateHistoryInfoActive("");
    this.updateAddListActiveName("");
    this.updateAddRecordFlag(true);
    this.$nextTick(() => {
      if (this.initComponent.historyPanel === 'telephone-action-history') {
        console.log('telephone');

        this.updateHistoryInfoActive("follow-up-record");
      } else {
        this.updateHistoryInfoActive(this.initComponent.historyPanel || "follow-up-record");
      }

      // this.updateHistoryInfoActive("follow-up-record");
      this.updateAddListActiveName("telephone-book");
    });
  }

  private getCaseCollectionType () {
    this.repairCasesService
      .getCollectionTypeByCaseId(this.caseId)
      .subscribe(data => (this.collectionType = data));
  }
}
</script>

<style lang="less" scoped>
.component.collection-action-area {
  background-color: #fff;
  width: 600px;
  .collection-area {
    height: 433px;
    overflow-y: auto;
  }
}
</style>
